<!--<template>-->
<!--  &lt;!&ndash; Button trigger modal &ndash;&gt;-->
<!--  <button type="button" class="px-6-->
<!--      py-2.5-->
<!--      bg-blue-600-->
<!--      text-white-->
<!--      font-medium-->
<!--      text-xs-->
<!--      leading-tight-->
<!--      uppercase-->
<!--      rounded-->
<!--      shadow-md-->
<!--      hover:bg-blue-700 hover:shadow-lg-->
<!--      focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0-->
<!--      active:bg-blue-800 active:shadow-lg-->
<!--      transition-->
<!--      duration-150-->
<!--      ease-in-out" data-bs-toggle="modal" data-bs-target="#exampleModal">-->
<!--    Launch demo modal-->
<!--  </button>-->

<!--  &lt;!&ndash; Modal &ndash;&gt;-->
<!--  <div class="modal fade fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"-->
<!--       id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">-->
<!--    <div class="modal-dialog relative w-auto pointer-events-none">-->
<!--      <div-->
<!--          class="modal-content border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current">-->
<!--        <div-->
<!--            class="modal-header flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md">-->
<!--          <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLabel">Modal title</h5>-->
<!--          <button type="button"-->
<!--                  class="btn-close box-content w-4 h-4 p-1 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline"-->
<!--                  data-bs-dismiss="modal" aria-label="Close"></button>-->
<!--        </div>-->
<!--        <div class="modal-body relative p-4">-->
<!--          Modal body text goes here.-->
<!--        </div>-->
<!--        <div-->
<!--            class="modal-footer flex flex-shrink-0 flex-wrap items-center justify-end p-4 border-t border-gray-200 rounded-b-md">-->
<!--          <button type="button" class="px-6-->
<!--          py-2.5-->
<!--          bg-purple-600-->
<!--          text-white-->
<!--          font-medium-->
<!--          text-xs-->
<!--          leading-tight-->
<!--          uppercase-->
<!--          rounded-->
<!--          shadow-md-->
<!--          hover:bg-purple-700 hover:shadow-lg-->
<!--          focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0-->
<!--          active:bg-purple-800 active:shadow-lg-->
<!--          transition-->
<!--          duration-150-->
<!--          ease-in-out" data-bs-dismiss="modal">Close</button>-->
<!--          <button type="button" class="px-6-->
<!--      py-2.5-->
<!--      bg-blue-600-->
<!--      text-white-->
<!--      font-medium-->
<!--      text-xs-->
<!--      leading-tight-->
<!--      uppercase-->
<!--      rounded-->
<!--      shadow-md-->
<!--      hover:bg-blue-700 hover:shadow-lg-->
<!--      focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0-->
<!--      active:bg-blue-800 active:shadow-lg-->
<!--      transition-->
<!--      duration-150-->
<!--      ease-in-out-->
<!--      ml-1">Save changes</button>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<template>
  <!-- This example requires Tailwind CSS v2.0+ -->
  <div
    v-if="isShow"
    aria-labelledby="modal-title"
    aria-modal="true"
    class="fixed z-10 inset-0 overflow-y-auto"
    role="dialog"
  >
    <div
      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
    >
      <!--
        Background overlay, show/hide based on modal state.

        Entering: "ease-out duration-300"
          From: "opacity-0"
          To: "opacity-100"
        Leaving: "ease-in duration-200"
          From: "opacity-100"
          To: "opacity-0"
      -->
      <div
        aria-hidden="true"
        class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
      ></div>

      <!-- This element is to trick the browser into centering the modal contents. -->
      <span aria-hidden="true" class="hidden sm:inline-block sm:align-middle sm:h-screen"
        >&#8203;</span
      >
      <div
        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
      >
        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
          <div class="form-control">
            <div class="relative">
              <input
                class="w-full pr-16 input input-primary input-bordered"
                placeholder="文章标题、tag:类别名"
                type="text"
              />
              <button class="absolute top-0 right-0 rounded-l-none btn btn-primary">搜索</button>
            </div>
          </div>
        </div>
        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
          <button
            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
            type="button"
            @click="$emit('close')"
          >
            关闭
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SearchModal',
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped></style>
